<template>
  <div>
    <p>1. 动态组件 component</p>
    <button @click="showA">点击显示A</button>
    <button @click="showB">点击显示B</button>
    <p>
      <component :is="currComponent"></component>
    </p>

    <p>2. 失活组件缓存状态  keep-alive</p>
    <p>ps: 只要需要缓存，就可以使用kepp-alive，其在路由中同样可以使用</p>
    <keep-alive><component :is="currComponent"></component></keep-alive>

    <p>3. 测试异步加载  组件C</p>
    <p>ps: 将 <br>
      import ChildCComponent from "./ChildCComponent"; <br>
      改为：<br>
      const ChildCComponent = () => import("./ChildCComponent"); <br>
    即可实现异步加载
    </p>
    <button @click="show02">点击切换组件</button>
    <keep-alive><component :is="curr02Component"></component></keep-alive>

    <p>4. 边界处理情况（暂略）  如：  读取跟实例上的数据 this.$root....</p>


    <p>5. 动画效果</p>
    <p>记录下列6个动画类名：  v-enter、v-enter-active、v-enter-to、v-leave、v-leave-active、v-leave-to</p>
    <MyAnimateTest/>


  </div>
</template>

<script>
  import ChildAComponent from "./child/ChildAComponent";
  import ChildBComponent from "./child/ChildBComponent";
  import MyAnimateTest from "./child/MyAnimateTest";
  export default {
    name: "HelloWorld02",
    components: {MyAnimateTest, ChildBComponent, ChildAComponent},
    data() {
      return {
        currComponent: ChildAComponent,
        curr02Component: ChildAComponent
      };
    },
    methods: {
      showA() {
        this.currComponent = ChildAComponent;
      },
      showB() {
        this.currComponent = ChildBComponent;
      },
      show02() {
        if(this.curr02Component === ChildAComponent) {
          this.curr02Component = ChildBComponent;
        } else {
          this.curr02Component = ChildAComponent;
        }
        console.log(this.$root.appMsg);
      }
    }
  }
</script>

<style scoped>
  p {
    color: red;
  }
</style>
